// pages/feedback/feedback.js
/**
   * 1 点击“+” 触发tap点击事件
   *  1 调用小程序内置的选择图片api
   *  2 获取到图片的路径 数组
   *  3 把图片路径 存到data中
   *  4 页面就可以根据 图片数组进行循环显示 自定义组件
   * 2 点击 自定义图片 组件
   *  1 获取被点击的元素索引
   *  2 获取 data中的图片数组
   *  3 根据索引 数组中删除对应的元素
   *  4 把数组重新设置回data中
   * 3 点击提交按钮
   *  1 获取文本域的内容
   *    1 data中定义变量 表示输入框内容
   *    2 文本域绑定输入事件 事件触发段的时候 把输入框的值存入到变量中
   *  2 对这些内容做合法性验证
   *  3 验证通过把用户选择的图片上传到专门的图片的服务器 返回图片的外网连接
   *    1 遍历图片数组
   *    2 挨个上传
   *    3 自己再来维护图片数组 存放 图片上传后的外网连接
   *  4 文本域和外网图片的路径一起提交到服务器  （前端的模拟 不会发送请求到后台）
   *  5 清空当前页面
   *  6 返回上一页
   * 
   */
Page({

  /**
   * 页面的初始数据
   */
  data: {
    tabs:[
      {
        id:0,
        value:"体验问题",
        isActive:true
    },
      {
        id:1,
        value:"商品、商家投诉",
       isActive:false
  },
  ],
   //被选中的图片路径数组
    chooseImgs:[],
    //文本域的内容
  textVal:""
  },
  //外网的图片路径数组
  upLoadImgs:[],
  handletabsItemChange(e){
    //1.获取被点击的标题索引
    const {index} = e.detail;
    // 2修改原数组
    let{tabs}=this.data;
    tabs.forEach((v,i)=>i===index?v.isActive=true:v.isActive=false)
    //赋值到data中
    this.setData({
      tabs
    })
  },
  //点击“+”选择图片事件
  handleChooseImg(){
    //调用小程序内置的选择图片api
    wx.chooseImage({
      //同时选中图片的数量
      count: 9,
      //图片的格式 原图 压缩
      sizeType: ['original','compressed'],
      //图片来源 相册 照相机
      sourceType: ['album','camera'],
      success: (result)=>{
        this.setData({
          //图片数组 进行拼接
          chooseImgs:[...this.data.chooseImgs,...result.tempFilePaths]
        })
      }
    });
  },
  //点击图片删除图片
  handleRemoveImg(e){
    //获取被点击组件的索引
    const{index} = e.currentTarget.dataset;
    // 获取data中的图片数组
    let {chooseImgs} = this.data
    // 删除元素
    chooseImgs.splice(index,1);
    this.setData({
      chooseImgs
    })

  },
  //文本域的输入事件
  handleTextInput(e){
    this.setData({
      textVal:e.detail.value
    })
  },
  //提交按钮点击事件
  handleFormSubmit(){
    //获取文本域内容
    const {textVal,chooseImgs} = this.data;
 
    //验证合法性
    if(!textVal.trim()){
      wx.showToast({
        title: '输入不合法',
        icon: 'none',
        mask: true
      });
      return;
    }
    //准备上传图片到专门的图片服务器
    //上传文件的api不支持多个文件同时上传 便利数组挨个上传
    chooseImgs.forEach((v,i)=>{
      wx.uploadFile({
        //图片要上传到哪里
      url: '', //假装有接口了用
      //被上传的文件的路径
      filePath: v,
      //上传的文件的名称 后台来获取文件 自取的 file
      name:"file" ,
      // 顺带的文本信息
      formData: {},
      success: (result)=>{
        // console.log(result);
        let url = JSON.parse( result.data).url;
        
        this.upLoadImgs.push(url);
        //所有的图片都上传完毕了才触发
        if(i===chooseImgs.length-1){
          console.log("模拟提交到后台");
          //提交成功了重置页面
          this.setData({
            textVal:"",
            chooseImgs:[]
          })
          //返回上个页面
           wx.navigateBack({
             delta: 1
           });
        }
      }
    });
    })
      
  }

 
})